<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 

        广东省   
            深圳  
                 宝安
                 龙岗
            广州   
                 白云
                 天河
       -->
      <p>{{value}}</p>

      <!-- cascader
         v-model:双向绑定,数据 类型要求是数组
         options:数据
         [  {
             label,value,children
         }]
         数据字段名对应不上时,一个配制可以改变默认对应关系
          props:{
              labla:"labal",  对应显示的名字
              value:"value",   对应选中后的值
              children:"child"   子集
          }
          需求:显示的结果 v-model的值里面它是对应label      
      
      
      -->
      <el-cascader
        v-model="value"
        :options="options"
        :props="{
          label:'label',
          value:'label',
          children:'child'
      }"
        @change="handleChange"
      ></el-cascader>
    </div>
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="./ele.css" />
    <script src="./index.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          myDate: "",
          value: [],
          options: [
            {
              value: "gd",
              label: "广东省",
              child: [
                {
                  label: "深圳",
                  value: "sz",
                  child: [
                    {
                      label: "宝安",
                      value: "ba",
                    },
                    {
                      label: "龙岗",
                      value: "lg",
                    },
                  ],
                },
                {
                  label: "广州",
                  value: "gz",
                  child: [
                    {
                      label: "白云",
                      value: "by",
                    },
                    {
                      label: "天河",
                      value: "th",
                    },
                  ],
                },
              ],
            },
          ],
        },
        methods: {
          handleChange() {},
        },
      });
    </script>
  </body>
</html>
